<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_7no2s29ved.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4800741_bj40vtwllsj.css">
    <link rel="stylesheet" href="../style/public.css">
    <title>二手车</title>
    <style>
        .ss {
            height: 30px;
            border: #8dd5ff solid 1px;
            outline: none;
            border-radius: 15px;
            padding-left: 20px;
            font-size: 12px;
        }

        .so {
            right: 10px;
            top: 5px;
        }
        .img img {
            width: 130px;
            height: 100px;
        }
    </style>
</head>

<body>

    <header class="pa10 bab fl fixed w100p">
        <span class="f16 fls0 fcc mr-10">南宁<i class="iconfont icon-xiajiantou f12 ml-5"></i></span>
        <div class="w100p rel">
            <input class="w100p ss" type="text" placeholder="品牌/车型/配置">
            <i class="iconfont icon-sousuo so abs f18"></i>
        </div>
    </header>
    <div style="height: 50px;"></div>


    <div class="tab bafff pt-10 pb-10">
        <div class="nav-bottom fca">
            <a class="fcc fdc" href="">
                <i class="iconfont icon-xiaomi f26 "></i>
                <span class="mt-5">小米</span>
            </a>
            <a class="fcc fdc" href="">
                <i class="iconfont icon-aodi f26 "></i>
                <span class="mt-5">奥迪</span>
            </a>
            <a class="fcc fdc" href="">
                <i class="iconfont icon-tesila f26 "></i>
                <span class="mt-5">特斯拉</span>
            </a>
            <a class="fcc fdc" href="">
                <i class="iconfont icon-Logo_Benz f26 "></i>
                <span class="mt-5">奔驰</span>
            </a>
            <a class="fcc fdc" href="">
                <i class="iconfont icon-gengduo f26 "></i>
                <span class="mt-5">更多</span>
            </a>
        </div>
        <div class=" mt-10 fca">
            <span class="pl-15 pr-15 pt-8 pb-8 baf5">5万以下</span>
            <span class="pl-15 pr-15 pt-8 pb-8 baf5">5-10万</span>
            <span class="pl-15 pr-15 pt-8 pb-8 baf5">10-15万</span>
            <span class="pl-15 pr-15 pt-8 pb-8 baf5">更多条件</span>
        </div>
    </div>

    <div class="list bafff pa10">
        <h1 class="f18 fwb">精选二手车</h1>
        <div v-for="(item, index) in list" :key="item.id" class="item fl pt-10 pb-10">
            <div class="img mr-10">
                <img :src="item.imgUrl" alt="">
            </div>
            <div class="info">
                <p class="title f16">{{item.name}}</p>
                <p class="fl mt-5">
                    <span class="price c666">{{item.kilometer}}万公里/</span>
                    <span class="time c666">{{item.year}}/</span>
                    <span class="mileage c666">{{item.region}}</span>
                </p>
                <p class=" mt-15">
                    <span class="price f18 fwb ce71">{{item.price}}万</span>
                </p>
            </div>
        </div>
    </div>
    <div class="fcc fdc h50">
        <p>没有更多内容了</p>
        <p>去看看其他内容吧</p>
    </div>


    <div style="height: 50px;"></div>
    <footer class="footer w100p bafff fixed h50">
        <div  class="footer-item fl aic jcsa">
            <a v-for="(item, index) in list" :key="item.id" :class="['footer-item fcc fdc', item.id === 2 ? 'cba' : '']" :href="item.herf">
                <i :class="['iconfont f22',item.icon]"></i>
                <span class="mt-5">{{ item.name }}</span>
            </a>
        </div>
    </footer>

    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue2.js"></script>
    <script src="../js/common.js"></script>

    <script>
        const list = new Vue({
            el: '.list',
            data: {
                list: []
            },
            async created() {
                let response = await axios.get('http://localhost:3888/used');
                this.list = response.data;
                console.log(this.list);
            }
        });
    </script>
</body>

</html>